<script setup>
import { reactive, ref, defineEmits } from "vue"

const emit = defineEmits(['changeActive']);

const activeIndex = ref(1)
const changeActive = (index) => {
    activeIndex.value = index
    emit('changeActive', index)
}
const tagList = reactive([
    { name: '社区管理', key: 1 },
    { name: '安保监控', key: 2 },
    { name: 'CIM平台', key: 3 },
    { name: '能源检测', key: 4 },
    { name: '节能分析', key: 5 },
])
</script>

<template>
    <div class="page">
        <div class="container">
            <div class="list">
                <div v-for="(item, index) in tagList" :key="index"
                    :class="[`button${item.key}`, { active: activeIndex === item.key }]"
                    @click="changeActive(item.key)">
                    <div class="text">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.page {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20rem;

    .container {
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
        // background: rgb(136, 214, 155);

        .list {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .base-button {
                height: 40px;
                overflow: hidden;
                border: 2px solid #4b5ccd;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.3);
                color: #fff;
                cursor: pointer;
            }

            .base-button:hover {
                color: #a9f4ff;
            }

            .base-button:active {
                color: #37e4ff;
                text-shadow: 0 0 1px #fff;
            }

            .active {
                color: #37e4ff;
                text-shadow: 0 0 5px #fff;
            }

            .button1 {
                @extend .base-button;
                transform: skew(25deg);
                margin-right: 40px;

                .text {
                    transform: skew(-25deg);
                    overflow: hidden;
                    margin: 0 10px;
                }
            }

            .button2 {
                @extend .base-button;
                transform: skew(10deg);
                margin-right: 40px;

                .text {
                    transform: skew(-10deg);
                    overflow: hidden;
                    margin: 0 10px;
                }
            }

            .button3 {

                @extend .base-button;
                height: 50px;
                transform: translateY(-10px);
                // font-size: 17px;

                .text {
                    margin: 0 10px;
                }
            }

            .button4 {
                @extend .base-button;
                transform: skew(-10deg);
                margin-left: 40px;

                .text {
                    transform: skew(10deg);
                    overflow: hidden;
                    margin: 0 10px;
                }
            }

            .button5 {
                @extend .base-button;
                transform: skew(-25deg);
                margin-left: 40px;

                .text {
                    transform: skew(25deg);
                    margin: 0 10px;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>
